const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require('path')

module.exports = {
    mode:'production',
    entry:{
        page1:'./src/page1',
        page2:'./src/page2',
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: './js/[name].[chunkhash:5].js'
    },
    optimization:{ // 优化项
        splitChunks:{
            // 分包策略
            chunks: 'all', // 所有chunk都分包
            // 如果某个包（包括分出来的包）超过了该值，则webpack会尽可能的将其分离成多个包
            // maxSize: 50*1024,
            // minSize: 1, //当分包达到多少字节后才允许被真正的拆分，默认值30000

            // 缓存组
            cacheGroups: {
                // 属性名是缓存组名称，会影响到分包的chunk名
                // 属性值是缓存组的配置，缓存组继承所有的全局配置，也有自己特殊的配置
                vendors: { 
                    test: /[\\/]node_modules[\\/]/, // 当匹配到相应模块时，将这些模块进行单独打包
                    priority: -10 // 缓存组优先级，优先级越高，该策略越先进行处理，默认值为0
                },
                default: {
                    minChunks: 2,  // 覆盖全局配置，将最小chunk引用数改为2
                    priority: -20, // 优先级
                    reuseExistingChunk: true // 重用已经被分离出去的chunk
                },
                styles:{
                    test: /\.css$/,
                    minChunks: 2,  // 覆盖全局配置，将最小chunk引用数改为2
                    priority: 0, // 优先级
                    reuseExistingChunk: true, // 重用已经被分离出去的chunk
                    minSize: 1,
                }
            }
        }
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:"./public/index.html",
            chunks: ["page1"]
        }),
        new MiniCssExtractPlugin({
            filename:'[name].[hash:5].css',
            // 配置来自于分割chunk的文件名
            chunkFilename: "common.[hash:5].css"
        })
    ],
    stats:{
        colors: true,
        chunks: false,
        modules: false
    }
}